<template>
  <div class="background">
    <Header style="margin-bottom: 20px"></Header>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple img">
          <h2 align="center">个人资料</h2>
          <el-image
            style="width: 250px; height: 250px"
            :src="url"
            :preview-src-list="srcList"
            >
          </el-image>
          <h2>{{authorName}}</h2>
        </div>
      </el-col>
      <el-col :span="17">
        <div>
          <Blog v-for="(blog,index) in blogs" :blog='blog' :key="index"></Blog>
        </div>
      </el-col>
      <el-col :span="1">
        <div></div>
      </el-col>
    </el-row>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../common/Header'
import Footer from '../common/Footer'
import Blog from '../common/Blog'
// eslint-disable-next-line no-unused-vars
import background from '../../assets/css/background.css'
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Header: Header,
    // eslint-disable-next-line vue/no-unused-components
    Footer: Footer,
    // eslint-disable-next-line vue/no-unused-components
    Blog: Blog
  },
  name: 'Author',
  data () {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
      ],
      authorName: '张三',
      blogs: {},
      userInfo: {},
      userId: ''
    }
  },
  created () {
    this.getBlogByAuthor()
  },
  methods: {
    getBlogByAuthor () {
      this.authorName = this.$route.params.author
      // this.userId = this.$route.params.userId
      this.userId = this.$route.query.userId
      this.$axios.get('/user/blog/' + this.authorName).then(res => {
        this.blogs = res.data
      })
      this.$axios.get('/info/' + this.userId).then(res => {
        this.userInfo = res.data.data
        this.url = this.userInfo.header
        this.srcList[0] = this.userInfo.header
      })
    }
  }
}
</script>

<style scoped>
.img{
  display: flex;
  flex-direction: column;
  align-items:center;
  padding: 10px;
}
</style>
